<template>
  <div class="productlist">
    <h1>商品列表（实例）</h1>
    <div class="keyed">
      <p>
        <span>商品：</span>
        <input type="text" v-model="newproductname" />
      </p>
      <p>
        <span>金额：</span>
        <input type="text" v-model="newproductcost" />
      </p>
      <p>
        <button @click="camenew">发布</button>
      </p>
    </div>
    <product v-for="item in items" :pdname="item.productname" :pdcost="item.productcost"></product>
    <div class="cost">
      <p>总金额：{{ totalcost }}<p>
      <p>购物车（0）</p>
    </div>
  </div>
</template>

<script>
import product from './product' // 组件路径
export default {
  components: { product },  // 注册组件
  data () {
    return {
      newproductname: '',
      newproductcost: '',
      totalcost: '50',
      items: [
        {
          productname: '香蕉',
          productcost: 20
        }
      ]
    }
  },
  methods: {
    camenew () {
      // 内容不为空的时候才触发
      if (this.newproductname != '' && this.newproductcost != '') {
        // 传给数组
        this.items.push({
          productname: this.newproductname,
          productcost: this.newproductcost
        })
        // 发布后清空键入内容
        this.newproductname = '',
        this.newproductcost = ''
      }      
    }
  }
}
</script>

<!-- scoped属性限定CSS作用范围 -->
<style scoped lang="scss">
  .productlist {
    width: 20rem;
    margin: auto;
    h1 {
      text-align: center;
      font-size: 1.5rem;
      padding: 1rem;
    }
    .cost {
      display: flex;  /* css3：flex布局 */
      flex-direction: row;  /* 排列方向：row（左右）row-reverse（右左）column（上下）column-reverse（下上） */
      justify-content: space-between;  /* flex-start（左对齐）flex-end（右对齐）center（居中）space-between（两端对齐）space-around（水平分布） */
      align-items: center;  /* flex-start（居顶）flex-end（居底）center（居中）baseline（两头顶满）stretch（内容对齐） */
    }
  }
  .keyed {
    p {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 2px 0px;
      span {
        width: 15%;
      }
      input {
        width: 85%;
      }
      button {
        width:100%;
      }
    }
  }
</style>
